<template>
	<view>
		<view class="mySwiper">
			  <swiper style="height: 320px;width: 100%;":indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000" circular="true">
			        <swiper-item v-for="(item,index) in swiper" @tap="jumpTo(item.id)">
			            <view class="artcile">
			            	<view class="art-img">
			            		<image style="height: 320px;width: 375px;" :src="item.image" mode="widthFix"></image>
			            	</view>
							<view class="art-title">
							   {{item.title}}
							</view>
							<view class="art-auth">
							   {{item.hint}}
							</view>
							<view class="art-bg"></view>
			            </view>
			        </swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	
	export default {
		name:"myswiper",
		props:{
			swiper:{
				type:Array
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			jumpTo(id){
				// console.log(id,"id");
				uni.navigateTo({
					url:"../../pages/content/content?id="+id,
				})
			}
		}
	}
</script>

<style>
.mySwiper{
     width: 100%;
	 height: 320px;
	 margin-top: 65px;
	/* background-color: #4CD964; */
}
.artcile{
	position: relative;
}
.artcile > view{
	position: absolute;
}
.artcile .art-img{
	height: 320px;
}
.artcile .art-title{
	width: 300px;
	margin-top: 210px;
	margin-left: 30px;
    font-size: 20px;
	color: #e8ecec;
	z-index: 3;
}
.artcile .art-auth{
	margin-top: 275px;
	margin-left: 30px;
	font-size: 15px;
	color: #999999;
	z-index: 3;
}
.artcile .art-bg{
	width: 100%;
	height: 80px;
	background: rgba(0,0,0,0.6);
	fliter:blur(20px);
	margin-top: 240px;
	z-index: 1;
	box-shadow:0 -10px 3px -1px  rgba(0,0,0,0.5);
}
</style>
